<template>
  <div class="page">
    <div class="hd">
    <slot name="hd"></slot>
  </div>
  <div class="con">
    <slot></slot>
  </div>
  <div class="fd">
    <slot name="fd"></slot>
  </div>
  </div>
</template>

<style scoped>
.page {
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.hd {
  margin-bottom: 10px;
}
.con {
  height: 0;
  flex-grow: 1;
  margin-top: 10px;
  background-color: aliceblue;
}
</style>
